<template>
  <div class="home">
    <div class="welcome-header">
      <h2>
        <span class="greeting">欢迎使用</span>
        法律数据智能问答系统
      </h2>
      <p class="description">
        基于DeepSeek大语言模型与RAGFlow技术构建，为法律咨询提供智能辅助工具。
        通过结合法律知识库和大语言模型的能力，提供专业、准确的法律解答和案例检索服务。
      </p>
    </div>
    
    <div class="feature-cards">
      <div class="feature-card" @click="$router.push('/qa')">
        <div class="card-header">
          <div class="card-icon qa">
            <span class="icon">⚖️</span>
          </div>
          <h3>法律问答系统</h3>
        </div>
        <p>输入您关于法律的任何问题，获取专业、详细的解答。系统会识别并加粗法律术语和法条引用，帮助您更好地理解法律知识。</p>
      </div>
      
      <div class="feature-card" @click="$router.push('/cases')">
        <div class="card-header">
          <div class="card-icon test">
            <span class="icon">📚</span>
          </div>
          <h3>案例检索系统</h3>
        </div>
        <p>输入案情描述，系统将检索相似案例并提供法律分析，帮助您了解司法实践中的裁判规则和法律适用情况。</p>
      </div>
    </div>
    
    <div class="topics-section">
      <div class="section-title">
        <h3>主要法律领域</h3>
        <div class="divider"></div>
      </div>
      
      <div class="topic-grid">
        <div class="topic-item" v-for="(topic, index) in topics" :key="index">
          <div class="topic-icon">
            <span>{{ topic.icon }}</span>
          </div>
          <div class="topic-content">
            <h4>{{ topic.title }}</h4>
            <ul>
              <li v-for="(item, i) in topic.items" :key="i">{{ item }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      topics: [
        {
          icon: '👨‍👩‍👧‍👦',
          title: '民事法律',
          items: ['婚姻家庭', '继承', '合同法', '侵权责任']
        },
        {
          icon: '🏢',
          title: '商事法律',
          items: ['公司法', '证券法', '破产法', '知识产权']
        },
        {
          icon: '⚔️',
          title: '刑事法律',
          items: ['刑法总则', '刑法分则', '刑事诉讼', '量刑规则']
        },
        {
          icon: '🏛️',
          title: '行政法律',
          items: ['行政许可', '行政处罚', '行政复议', '行政诉讼']
        },
        {
          icon: '⚙️',
          title: '程序法律',
          items: ['民事诉讼', '证据规则', '司法解释', '执行程序']
        },
        {
          icon: '🌐',
          title: '新兴领域',
          items: ['互联网法律', '数据保护', '金融科技', '人工智能伦理']
        }
      ]
    };
  }
}
</script>

<style scoped>
.home {
  padding: 0;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.welcome-header {
  margin-bottom: 2rem;
}

.welcome-header h2 {
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  color: #111827;
}

.greeting {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 0.3rem;
}

.description {
  color: #4b5563;
  line-height: 1.6;
  max-width: 650px;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.feature-card {
  background-color: white;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.card-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  font-size: 1.4rem;
}

.card-icon.qa {
  background-color: #EFF6FF;
  color: #2563EB;
}

.card-icon.test {
  background-color: #F0F9FF;
  color: #0369A1;
}

.feature-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #111827;
}

.feature-card p {
  color: #4b5563;
  line-height: 1.6;
}

.topics-section {
  margin-bottom: 2rem;
}

.section-title {
  margin-bottom: 1.5rem;
  text-align: center;
}

.section-title h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.divider {
  height: 2px;
  width: 60px;
  background-color: #2B579A;
  margin: 0 auto;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.topic-item {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
}

.topic-icon {
  width: 50px;
  background-color: #f9fafb;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1rem;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.topic-content {
  padding: 1rem;
  flex: 1;
}

.topic-content h4 {
  color: #111827;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.topic-content ul {
  list-style-type: none;
}

.topic-content li {
  margin-bottom: 0.5rem;
  color: #4b5563;
  font-size: 0.9rem;
  position: relative;
  padding-left: 1.2rem;
}

.topic-content li::before {
  content: "•";
  color: #10a37f;
  position: absolute;
  left: 0;
  font-weight: bold;
}

@media (max-width: 768px) {
  .home {
    padding: 0 1rem;
  }
  
  .welcome-header h2 {
    font-size: 1.4rem;
  }
  
  .feature-cards {
    grid-template-columns: 1fr;
  }
  
  .topic-grid {
    grid-template-columns: 1fr;
  }
}
</style> 